<template>
	<view>
		<uni-popup ref="addressPopup" type="center" :mask-click="false">
			<view class="address-modal">
				<view class="modal-header">修改发票信息</view>
				<uni-icons type="closeempty" size="20" class="modal-icon" @click="closeModal"></uni-icons>
				<view class="modal-content">
					<uni-forms label-width="80px" ref="customForm" :rules="customRules" :modelValue="customFormData">
						<uni-forms-item label="类型" required name="current" v-if="isType===0">
							<radio-group @change="radioChange">
								<view>
									{{customFormData.type}}
									<radio color="#E91F1B" :value="1" :checked="1 === customFormData.type" />
									<text class="radioText">单位</text>
									<radio color="#E91F1B" :value="2" :checked="2 === customFormData.type" />
									<text>个人</text>
								</view>
								<!-- <view>{{item.name}}</view> -->
							</radio-group>
						</uni-forms-item>
						<uni-forms-item label="发票抬头" required name="title">
							<uni-easyinput v-model="customFormData.title" placeholder="请输入发票抬头" />
						</uni-forms-item>
						<view v-if="customFormData.type==1">
							<uni-forms-item label="纳税人识别号" required name="number">
								<uni-easyinput v-model="customFormData.number" placeholder="请输入纳税人识别号" />
							</uni-forms-item>
							<uni-forms-item label="注册地址" required name="address">
								<uni-easyinput v-model="customFormData.address" placeholder="请输入注册地址" />
							</uni-forms-item>
							<uni-forms-item label="注册电话" required name="tel">
								<uni-easyinput v-model="customFormData.tel" placeholder="请输入注册电话" />
							</uni-forms-item>
							<uni-forms-item label="开户银行" required name="blank">
								<uni-easyinput v-model="customFormData.blank" placeholder="请输入开户银行" />
							</uni-forms-item>
							<uni-forms-item label="银行账户" required name="blank_number">
								<uni-easyinput v-model="customFormData.blank_number" placeholder="请输入银行账户" />
							</uni-forms-item>
						</view>

					</uni-forms>

					<view class="button-group">
						<button class="btn cancel" @click="closeModal">取消</button>
						<button class="btn confirm" @click="submit()">确定</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var db = uniCloud.database();
	export default {
		name: "modifyInvoice",
		data() {
			return {
				isType: 0, // 是否展示类别 1、0展示所有 1、展示企业  2、展示个人
				// 自定义表单数据
				customFormData: {
					type: 1, // 类型（默认公司）
					title: '', // 发票抬头
					number: '', // 纳税人识别号
					address: '', // 注册地址
					tel: '', // 注册电话
					blank: '', // 开户银行
					blank_number: '', // 银行账户
				}

			};
		},
		props:['userinfo','defaultInvoice'],
		watch:{
			defaultInvoice(val){
				console.log('val',val);
				if(val && val.item && val.item._id){
					this.customFormData = val.item;
				}else{
					this.customFormData = {
						type: 1, // 类型（默认公司）
						title: '', // 发票抬头
						number: '', // 纳税人识别号
						address: '', // 注册地址
						tel: '', // 注册电话
						blank: '', // 开户银行
						blank_number: '', // 银行账户
					}
				}
				
				
			}
		},
		methods: {
			radioChange(evt) {
				this.customFormData.type = evt.detail.value
			},
			// 省市县选项变化
			onchange(e) {
				const value = e.detail.value
			},
			// 点击省市县选项
			onnodeclick(node) {
				// console.log('00:', this.customFormData.classes)
			},

			// 打开修改发票弹窗
			openModal(val) {
				console.log(val)
				if (val) {
					this.customFormData.type = val
					this.isType = val
				} else {
					this.customFormData.type = 1
					this.isType = 0
				}
				this.$refs.addressPopup.open();
			},
			// 关闭修改发票弹窗
			closeModal() {
				this.$refs.addressPopup.close();
			},
			// 提交表单
			submit() {
				var that = this;
				var formData = this.customFormData;
				if(formData.type == 1){
					//验证标题
					var title = formData.title;
					if(!title){
						uni.showToast({
							title:'请输入发票抬头',
							icon:'none'
						})
						return false;
					}
					var number = formData.number;
					if(!number){
						uni.showToast({
							title:'请输入纳税人识别号',
							icon:'none'
						})
						return false;
					}
					
					var address = formData.address;
					if(!address){
						uni.showToast({
							title:'请输入注册地址',
							icon:'none'
						})
						return false;
					}
					
					var tel = formData.tel;
					if(!tel){
						uni.showToast({
							title:'请输入联系电话',
							icon:'none'
						})
						return false;
					}
					
					var blank = formData.blank;
					if(!blank){
						uni.showToast({
							title:'请输入开户银行',
							icon:'none'
						})
						return false;
					}
					
					var blank_number = formData.blank_number;
					if(!blank_number){
						uni.showToast({
							title:'请输入银行账户',
							icon:'none'
						})
						return false;
					}
					
					
					
					
				}else if(formData.type == 2){
					var title = formData.title;
					if(!title){
						uni.showToast({
							title:'请输入发票抬头',
							icon:'none'
						})
						return false;
					}
				}
				
				formData.uid = this.userinfo._id;
				var defaultInvoice = this.defaultInvoice;
				if(formData.uid && !defaultInvoice.item._id){
					db.collection('invoice').add(formData).then(res=>{
						that.customFormData._id = res.result.id;
						uni.showToast({
							title:'添加成功'
						})
						//通知父组件
						that.$emit('invoiceUpdated', that.customFormData);
						this.closeModal();
					});
				}else if(defaultInvoice.item._id && formData.uid){
					var id = formData._id;
					delete formData._id;
					if(id){
						db.collection('invoice').where({_id:id}).update(formData).then(res=>{
							uni.showToast({
								title:'修改成功'
							})
							var data = {
								index:defaultInvoice.index,
								item:that.customFormData
							}
							//通知父组件
							that.$emit('invoiceUpdated', data);
							this.closeModal();
						});
					}
					
				}
			},

		}
	}
</script>

<style scoped>
	.address-modal {
		width: 500px;
		height: 340px;
		background: #fff;
		border-radius: 16px;
		/* padding: 30px 20px; */
		box-sizing: border-box;
		position: relative;
	}

	.modal-icon {
		position: absolute;
		top: 8px;
		right: 12px;
	}

	.modal-header {
		width: 100%;
		height: 40px;
		font-size: 14px;
		font-weight: 600;
		background-color: #F5F5F5;
		border-radius: 8px;
		padding: 0 16px;
		box-sizing: border-box;
		line-height: 40px;
		/* margin-bottom: 25px; */
		/* text-align: center; */
	}

	.modal-content {
		background-color: white;
		width: 100%;
		height: 500px;
		padding: 20px;
		box-sizing: border-box;
		border-radius: 8px;
	}

	.radioText {
		margin-right: 20px;
	}

	.modal-content /deep/ uni-radio-group {
		margin-top: 8px;
	}

	.modal-content /deep/ uni-radio:not([disabled]) .uni-radio-input {
		width: 16px;
		height: 16px;
	}

	.modal-content /deep/ uni-radio:not([disabled]) .uni-radio-input:hover {
		border-color: #E91F1B !important;
	}

	/* 按钮 */

	/* uni-button[type='primary'] {
		background-color: #D92400;
	} */

	.button-group {
		display: flex;
		justify-content: space-between;
		margin: 30px auto;
		margin-bottom: 0;
		width: 290px;
	}

	.btn {
		width: 25%;
		height: 30px;
		border-radius: 8px;
		font-size: 16px;
		line-height: 30px;
		font-size: 14px;
		/* margin-left: 60px; */
	}

	.btn.cancel {
		background: #f5f5f5;
		color: #333;
		/* margin-left: 120px; */
		/* margin-right: 20px; */
	}

	.btn.confirm {
		background: #E91F1B;
		color: #fff;
		margin-left: 0;
	}
</style>